<template>
	<view class="wrapper">
		<!-- 店铺信息 -->
		<navigator hover-class="none" url="../my/dpInfo/dpInfo" open-type="navigate" class="dpInfo padding-lg flex align-center bg-white">
			<view class="cu-avatar radius xl" style="background-image: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1102394953,2204724193&fm=11&gp=0.jpg');"></view>
			<view class="margin-left">
				<view class="flex align-center">
					<view class="text-bold text-lg margin-right-sm">三木木手作工作室</view>
				</view>
				<view class="">
					<text class="cuIcon-likefill text-red"></text>
					<text class="cuIcon-likefill text-red"></text>
					<text class="cuIcon-likefill text-red"></text>
					<text class="cuIcon-likefill text-red"></text>
					<text class="cuIcon-likefill text-red"></text>
				</view>
				<view>
					蜡烛/香薰/手工皂
				</view>
				<view>
					<!-- 在线课程以及配套工具，成品制作 -->
				</view>
				<view>
					<text>当前收藏 78</text><text class="margin-left">所在地 武汉市</text>
				</view>
			</view>
		</navigator>
		
		<!-- 店长推荐 -->
		<view class="dztj padding-tb">
			<view class="title-bg flex justify-center">
				<image src="/static/bg/hhbg.png" style="width: 125px;height:50px"></image>
			</view>
			<view class="text-center text-bold text-xxl">店长推荐</view>
			<view class="list flex flex-wrap">
				<navigator class="item bg-white" v-for="item in list" :key="item.id" hover-class="none" :url="'/pages/commodity/product?id='+item.id">
					<view class="image">
						<image :src="item.imgsrc" mode="scaleToFill"></image>
					</view>
					<view class="padding-lr-xs">{{$service.showStr(item.name,21,'...')}}</view>
					<view class="flex justify-between text-red align-center padding-sm">
						<view class="text-price">{{item.price}}</view>
						<button class="cu-btn cuIcon"><text class="cuIcon-cartfill text-red"></text></button>
					</view>
				</navigator>
			</view>
		</view>
		
		<!-- 在线视频课程 -->
		<view class="dztj padding-tb">
			<view class="title-bg flex justify-center">
				<image src="/static/bg/hhbg.png" style="width: 125px;height:50px"></image>
			</view>
			<view class="text-center text-bold text-xxl">在线视频课程</view>
			<view class="list flex flex-wrap">
				<navigator class="item bg-white" v-for="item in list" :key="item.id" hover-class="none" :url="'/pages/commodity/product?id='+item.id">
					<view class="image">
						<image :src="item.imgsrc" mode="scaleToFill"></image>
					</view>
					<view class="padding-lr-xs">{{$service.showStr(item.name,21,'...')}}</view>
					<view class="flex justify-between text-red align-center padding-sm">
						<view class="text-price">{{item.price}}</view>
						<button class="cu-btn cuIcon"><text class="cuIcon-cartfill text-red"></text></button>
					</view>
				</navigator>
			</view>
		</view>
		
		<!-- 材料包 -->
		<view class="dztj padding-tb">
			<view class="title-bg flex justify-center">
				<image src="/static/bg/hhbg.png" style="width: 125px;height:50px"></image>
			</view>
			<view class="text-center text-bold text-xxl">材料包</view>
			<view class="list flex flex-wrap">
				<navigator class="item bg-white" v-for="item in list" :key="item.id" hover-class="none" :url="'/pages/commodity/product?id='+item.id">
					<view class="image">
						<image :src="item.imgsrc" mode="scaleToFill"></image>
					</view>
					<view class="padding-lr-xs">{{$service.showStr(item.name,21,'...')}}</view>
					<view class="flex justify-between text-red align-center padding-sm">
						<view class="text-price">{{item.price}}</view>
						<button class="cu-btn cuIcon"><text class="cuIcon-cartfill text-red"></text></button>
					</view>
				</navigator>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{id:1,name:"香薰蜡烛石膏专用精油精油室内香薰房间香水薰衣草玫瑰精油香薰",type:"",price:70.8,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"},
					{id:2,name:"香薰蜡烛石膏专用s sf瑰精油香薰",type:"",price:73.8,number:6,imgsrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=346602316,2196179934&fm=26&gp=0.jpg"},
					{id:3,name:"香薰蜡烛石膏专用精油精油室内香薰房间香水薰衣草玫瑰精油香薰",type:"",price:76.3,number:1,imgsrc:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3051321824,3703227504&fm=26&gp=0.jpg"},
					{id:4,name:"香薰蜡烛石膏专用精油精油室内香薰房间香水薰衣草玫瑰精油香薰薰房间香水薰衣草玫瑰精油香薰",type:"",price:70.8,number:3,imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592549058290&di=7074b5a83406a1d1abcdc9fb3059e1f1&imgtype=0&src=http%3A%2F%2Fwww.lyh8.cn%2Fupload%2Fnews%2F2012-5-21%2F2012521200135b5yz.jpg"},
					{id:5,name:"香薰蜡烛石膏sdfsf内香薰房间香水薰衣草玫瑰精油香薰",type:"",price:70.2,number:1,imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592549057259&di=cd070fb489eecd0017b2b062f6f7fafa&imgtype=0&src=http%3A%2F%2Fimage5.suning.cn%2Fuimg%2Fb2c%2Fnewcatentries%2F0070145206-000000000184368513_5_800x800.jpg"},
					{id:6,name:"香薰蜡烛石膏专用精油精油室内香薰房间香水薰衣草玫瑰精油香薰",type:"",price:70.8,number:1,imgsrc:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2866998911,2419028599&fm=26&gp=0.jpg"},
					{id:7,name:"香薰蜡烛石膏专用精油精薰衣草玫瑰精室内香薰房间香水",type:"",price:70.7,number:2,imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592549121412&di=95f18ff4c334ac1d4dd6525acc904f49&imgtype=0&src=http%3A%2F%2Fimg.xiugei.com%2Fviewinfo%2Finfoimgsps%2Fltzt%2Fcontent1414205464154.png"},
					{id:8,name:"香薰蜡0-房间香水薰衣草玫瑰精油香薰",type:"",price:70.8,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"},
					{id:9,name:"香薰蜡烛石膏专用精油精油室内香薰房间香水薰衣草玫瑰精油香薰",type:"",price:70.4,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"},
					{id:10,name:"香薰蜡烛石膏专用精油精油水薰衣草玫瑰精油香薰",type:"",price:70.8,number:1,imgsrc:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=663305452,3399366098&fm=26&gp=0.jpg"}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.wrapper{
	.dpInfo{
		.cu-avatar{
			width:75px;
			height:75px;
		}
		.cuIcon-likefill{
			margin-right: 3px;
		}
	}
	.list{
		.item{
			width:46vw;
			border-radius: 8px;
			margin: 2vw;
			.image{
				border-radius: 8px;
				overflow: hidden;
				image{
					width:46vw;
					height: 46vw;
				}
			}
		}
	}
}
</style>
